<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!-- view 层 模板-->
<div id="app">
    <!--方法调用-->
    <p> currentTime1 {{currentTime1()}}</p>
    <!--计算属性调用-->
    <p> currentTime2 {{currentTime2}}</p>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"qinjiang"
        },
        methods : {
            currentTime1:function() {
                return Date.now();//返回当前时间戳
            }
        },
        //计算属性
        computed:{// methods computed 方法名不能重名,重名之后只会调用methods方法
            currentTime2:function() {
                console.log("computed-计算属性")
                this.message;
                return Date.now();//返回当前时间戳
            }
        }

        /**
         * 注意:methods和computed 里的东西不能重名
         说明:
         . methods:定义方法，调用方法使用currentTime1()，需要带括号
         . computed:定义计算属性，调用属性使用currentTime2，不需要带括号; this.message是为了能够让 currentTime2观察到数据变化而变化
         ·如何在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.message="qinjiang",改变下数据的值，再次测试观察效果!
         结论:
         调用哀法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，
         那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,
         计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

         */
    });

</script>
</body>
</html>
